<template>
  <div class="gContainer">
    <gSearch @getData="update" />
    <!-- <threeGraph /> -->
    <threeGraph
      :data="data"
      :names="names"
      :labels="labels"
      :linkTypes="linkTypes"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import gSearch from '@/components/gSearch.vue'
import threeGraph from '@/components/threeGraph.vue'

export default {
  name: 'threeView',
  components: {
    gSearch,
    threeGraph
  },
  data () {
    return {
      // d3jsonParser()处理 json 后返回的结果
      data: {
        nodes: [],
        links: []
      },
      // label对应的名称（和下面labels对应）
      names: ['药品', '疗效', '口感', '过敏体质', '药品成分', '忌吃', '症状', '治愈'],
      // start和end的type
      labels: ['drug', 'drug_efficacy', 'drug_taste', 'drug_person_group', 'drug_ingredient', 'drug_food_group', 'symptom', 'disease'],
      // relationship的type
      linkTypes: ['drug_efficacy', 'drug_taste', 'person_group', 'ingredient', 'food_group', 'symptom_cure_drug', 'disease_cure_drug']
    }
  },
  methods: {
    // 视图更新
    update (json) {
      console.log('update')
      console.log(json)
      this.d3jsonParser(json)
    },
    /*eslint-disable*/
    // 解析json数据，主要负责数据的去重、标准化
    d3jsonParser (json) {
      const nodes =[]
      const links = [] // 存放节点和关系
      const nodeSet = [] // 存放去重后nodes的id

      // 使用vue直接通过require获取本地json，不再需要使用d3.json获取数据
      // d3.json('./../data/records.json', function (error, data) {
      //   if (error) throw error
      //   graph = data
      //   console.log(graph[0].p)
      // })

     
        for (let segment of json) {
          // 重新更改data格式
          if (nodeSet.indexOf(segment.a.identity) == -1) {
            nodeSet.push(segment.a.identity)
            nodes.push({
              id: segment.a.identity,
              label: segment.a.labels[0],
              properties: segment.a.properties
            })
          }
          if (nodeSet.indexOf(segment.b.identity) == -1) {
            nodeSet.push(segment.b.identity)
            nodes.push({
              id: segment.b.identity,
              label: segment.b.labels[0],
              properties: segment.b.properties
            })
          }
          links.push({
            source: segment.r.start,
            target: segment.r.end,
            type: segment.r.type,
            properties: segment.r.properties
          })
        
      }
      console.log(nodes)
      console.log(links)
      // this.links = links
      // this.nodes = nodes
      this.data = { nodes, links }
      // return { nodes, links }
    }
  }
}
</script>

<style lang="scss" scoped>
.gContainer {
  position: relative;
  border: 2px #000 solid;
  background-color: #9dadc1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
</style>
